<!--
@Descripttion 输入框 (文本，密码)
@Author Bell
@Date 2021-11-16
@LastEditors Bell
@LastEditTime 2021-11-16
@property {Boolean} password    默认值(false) 是否是密码框
@property {Number}  max         默认值(50)    可输入长度
@property {String}  width       默认值(200px) 输入框宽度
@property {String}  icon        默认值(无)    输入框图片
@property {Boolean} disabled    默认值(false) 是否失效
@property {String}  placeholder 默认值(请输入) 默认占位文本
@property {String}  append      默认值(无)    尾部追加的文字
@property {Boolean} autofocus   默认值(false) 是否默认聚焦
@example <JYInput v-model.trim="xxx" />
 -->
<template>
  <el-input
    v-model="value"
    @input="changeVal"
    :show-password="password"
    clearable
    :maxlength="max"
    :style="`width: ${width}`"
    :prefix-icon="icon"
    :disabled="disabled"
    :placeholder="placeholder"
    :autofocus="autofocus"
  >
    <template v-if="append" slot="append">{{append}}</template>
  </el-input>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import mixin from './mixin-input'

export default defineComponent({
  name: 'jy-input',
  props: {
    modelValue: {
      required: true
    },
    // 是否是密码框
    password: {
      type: Boolean,
      default: false
    },
    // 可输入长度
    max: {
      type: Number,
      default: 50
    },
    // 输入框宽度
    width: {
      type: String,
      default: '200px'
    },
    // 输入框图片
    icon: {
      type: String,
      default: ''
    },
    // 是否失效
    disabled: {
      type: Boolean,
      default: false
    },
    // 默认占位文本
    placeholder: {
      type: String,
      default: '请输入'
    },
    // 尾部追加的文字
    append: {
      type: String,
      default: ''
    },
    // 是否默认聚焦
    autofocus: {
      type: Boolean,
      default: false
    }
  },
  emits: ['input', 'update:modelValue'],
  setup (props, context) {
    // mixins 混入
    const { value, changeVal } = mixin(props, context)
    
    return {
      value,
      changeVal
    }
  }
})
</script>
